import 'package:flutter/material.dart';

class HollowOutTest extends StatefulWidget {
  @override
  _HollowOutTestState createState() => _HollowOutTestState();
}

class _HollowOutTestState extends State<HollowOutTest>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    print('----build');
    return Scaffold(
      appBar: AppBar(title: Text('镂空文字')),
      body: Center(
          child: SingleChildScrollView(
        child: Column(
          children: [
            WangShuHollowedText(
              text: 'the quick brown fox jumps over a lazy dog',
            ),
            HollowOutWidget(),
          ],
        ),
      )),
    );
  }
}

class WangShuHollowedText extends StatelessWidget {
  final String text;
  final double size;
  final Color color;

  const WangShuHollowedText(
      {Key key, this.text, this.size = 48, this.color = Colors.black})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Text(
          text,
          style: TextStyle(
              fontSize: size,
              foreground: Paint()
                ..style = PaintingStyle.stroke
                ..strokeWidth = 4
                ..color = color),
        ),
        Text(
          text,
          style: TextStyle(fontSize: size, color: Colors.white),
        ),
      ],
    );
  }
}

class HollowOutWidget extends StatelessWidget {
  final double distance;

  const HollowOutWidget({Key key, this.distance = 2}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          'hello word 空心',
          style: TextStyle(
              fontSize: 40,
              foreground: Paint()
                ..color = Colors.red
                ..style = PaintingStyle.stroke
                ..strokeWidth = 1),
        ),
        Text(
          'the quick brown fox jumps over a lazy dog',
          style: TextStyle(
              fontSize: 40,
              foreground: Paint()
                ..color = Colors.red
                ..style = PaintingStyle.stroke
                ..strokeWidth = 1),
        ),
        Text(
          'hello word 空心',
          style: TextStyle(
              fontSize: 40,
              foreground: Paint()
                ..color = Colors.red
                ..style = PaintingStyle.stroke
                ..strokeWidth = 1),
        ),
        Text(
          'hello word 空心',
          style: TextStyle(
              fontSize: 40,
              foreground: Paint()
                ..color = Colors.red
                ..style = PaintingStyle.stroke
                ..strokeWidth = 1),
        ),
        Text(
          'hello word 空心',
          style: TextStyle(
              fontSize: 40,
              foreground: Paint()
                ..color = Colors.red
                ..style = PaintingStyle.stroke
                ..strokeWidth = 1),
        ),
        Text(
          'hello word 空心',
          style: TextStyle(
              fontSize: 40,
              foreground: Paint()
                ..color = Colors.red
                ..style = PaintingStyle.stroke
                ..strokeWidth = 1),
        ),
        Text(
          'hello word 空心',
          style: TextStyle(
              fontSize: 40,
              foreground: Paint()
                ..color = Colors.red
                ..style = PaintingStyle.stroke
                ..strokeWidth = 1),
        ),
        Text(
          'text',
          style: TextStyle(fontSize: 70, color: Colors.white, shadows: [
            Shadow(color: Colors.red, offset: Offset(0, distance)),
            Shadow(color: Colors.red, offset: Offset(distance, 0)),
            Shadow(color: Colors.red, offset: Offset(-distance, 0)),
            Shadow(color: Colors.red, offset: Offset(0, -distance)),
            Shadow(color: Colors.red, offset: Offset(distance, -distance)),
            Shadow(color: Colors.red, offset: Offset(-distance, -distance)),
            Shadow(color: Colors.red, offset: Offset(distance, distance)),
            Shadow(color: Colors.red, offset: Offset(-distance, distance)),
          ]),
        ),
        Container(
          // color: Colors.green,
          child: Stack(
            children: [
              Text('汉字可以 english no',
                  style: TextStyle(
                      fontSize: 80,
                      // letterSpacing: 8,
                      color: Colors.pink, //color
                      fontWeight: FontWeight.w800)),
              Text('汉字可以 english no',
                  style: TextStyle(
                      fontSize: 80,
                      // letterSpacing: 10,
                      color: Colors.white, //color
                      fontWeight: FontWeight.w400)),
            ],
          ),
        ),
      ],
    );
  }
}
